import React, { Component } from "react";
class Extending extends React.Component {
  componentDidMount() {
    console.log("componentDidMount, extending");
  }
  render() {
    return (
      <>
        <div>extending</div>
      </>
    );
  }
}
const withLog = (str) => (WrappedComponent) => {
  const didMount = WrappedComponent.prototype.componentDidMount;
  return class A extends WrappedComponent {
    componentDidMount() {
      if (didMount) {
        didMount.apply(this);
      }
      console.log(str);
    }
  };
};
const LogComponent = withLog("hello luyi123")(Extending);
export default function Hoc() {
  return (
    <>
      <h1>Hoc</h1>
      <h1>属性继承</h1>
      <RefPropCard></RefPropCard>
      <BulePropCard></BulePropCard>
      <h1>反向继承</h1>
      <LogComponent></LogComponent>
    </>
  );
}
const withCard = (color) => (Component) => {
  return (props) => {
    const hocStyle = {
      margin: "8px",
      padding: "8px",
      border: "1px solid #ccc",
      borderRadius: "4px",
      background: color,
    };
    return (
      <div style={hocStyle}>
        <Component {...props} color={color} name="高阶组件"></Component>
      </div>
    );
  };
};
const ProProxy = ({ color, name }) => {
  console.log(color, name);

  return (
    <>
      <div>
        <h2>this is the tile color:{color}</h2>
        <p>hello , my name is kang name:{name}</p>
      </div>
    </>
  );
};
const RefPropCard = withCard("red")(ProProxy);
const BulePropCard = withCard("blue")(ProProxy);
